
<template>
    <div style="width:100%">
        <el-input v-model="defaultPrg" placeholder="禁止双击" v-if="disabled"></el-input>
        <el-input v-model="defaultPrg" clearable @dblclick.native="dialogVisible=true" placeholder="双击选择默认程序" style="width:180px" v-else readonly></el-input>
        <el-dialog title="程序" :visible.sync="dialogVisible" width="500px" v-el-drag-dialog :close-on-click-modal="false">
            <div style="height:360px;width:100%;position:relative;">
                <div class="pagetop">
                    <table class="table1style" style="width:100%">
                        <tr>
                            <td>
                                <b font-weight="800">检 索</b>
                            </td>
                            <td align="left">
                                <el-input v-model="txtsearch" placeholder="输入程序代码或名称" ref="refsearch" :clearable="true"></el-input>
                            </td>
                            <td align="right">
                                <el-button @click="getdialogdata" icon="el-icon-success">确 定</el-button>
                                <el-button @click.native="dialogVisible = false" icon="el-icon-error">取 消</el-button>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="pagecenter">
                    <div class="middle-center">
                        <vxe-table show-overflow border ref="xTable2" height="auto" size="mini" :select-config="{reserve: true}" :mouse-config="{selected: true}" @cell-dblclick="getdialogdata" @current-change="currentChangeEvent" :data.sync="list" show-header-overflow highlight-current-row highlight-hover-row resizable stripe header-align="center" :edit-config="{trigger: 'click', mode: 'cell',showStatus: true,showIcon:false}">
                            <vxe-table-column type="index" title="NO." width="60"></vxe-table-column>
                            <vxe-table-column field="prgcode" title="程序代号" width="130"></vxe-table-column>
                            <vxe-table-column field="prgname" title="程序名称" width="230"></vxe-table-column>
                        </vxe-table>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script type="text/javascript">
export default {
    props: ["disabled", "value"],
    data() {
        return {
            tableData2: [],
            dialogVisible: false,
            prgcode: "",
            prgname: "",
            txtsearch: "",
            defaultPrg: "",
        };
    },
    created() {
        this.InitPageDate(); //初始化主列表
    },
    watch: {
        defaultPrg(val, oldval) {
            if (val == "") {
                this.$emit("input", "", "");
            }
        },
        value(val) {
            let rest = this.tableData2.filter((item) => {
                return item.prgcode == val;
            });
            if (rest.length > 0) {
                this.defaultPrg = rest[0].prgname + "[" + rest[0].prgcode + "]";
            } else {
                this.defaultPrg = "";
            }
        },
    },
    computed: {
        list() {
            let filterName = this.txtsearch.trim();
            if (filterName) {
                let filterRE = new RegExp(filterName, "gi");
                let rest = this.tableData2.filter((item) => {
                    return item.prgcode.toUpperCase().indexOf(filterName.toUpperCase()) > -1 || (item.prgname ? item.prgname.indexOf(filterName) > -1 : false);
                });
                return rest;
            } else {
                return this.tableData2;
            }
        },
    },
    mounted() {},
    updated() {
        this.dialogVisible = this.dialogVisible;
       if(this.$refs.refsearch) this.$refs.refsearch.focus();
    },
    methods: {
        currentChangeEvent({ row }) {
            this.prgcode = row.prgcode;
            this.prgname = row.prgname;
        },
        getdialogdata() {
            this.defaultPrg = this.prgname + "[" + this.prgcode + "]";
            this.$emit("input", this.prgcode, this.prgname);
            this.dialogVisible = false;
        },
        InitPageDate() {
            this.$tool
                .request({
                    url: "/ucent/dashboard",
                    method: "post",
                    data: {
                        action: "getOption",
                    },
                })
                .then((res) => {
                    this.tableData2 = res.data;
                })
                .catch((e) => {
                    console.log("error", e);
                });
        },
    },
};
</Script>

<style scoped>
.pagecenter {
    position: absolute;
    top: 40px;
    width: 100%;
    left: 0;
    right: 0px;
    bottom: 0px;
    overflow: auto;
}

.middle-center {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0px;
    right: 0px;
    overflow: auto;
}

.pagebottom {
    position: absolute;
    -webkit-box-pack: center;
    -webkit-box-align: bottom;
    bottom: 0px;
    width: 100%;
    height: 40px;
    right: 0px;
    border: 1px solid #ccc;
}
.table1style tr td {
    padding: 3px 2px 3px 5px;
}
</style>
